import { Icon, point } from "leaflet";

/**
 * Canvas Icon
 * @type {L.CanvasIcon}
 * @extends {L.Icon}
 */
const CanvasIcon = Icon.extend({
    options: {
        /** @var {Point} */
        iconSize: [24, 24],
        /** @var {Point} */
        iconAnchor: [12, 12],
        /** @var {Function} */
        drawIcon: null,
        /** @var {string} */
        className: "leaflet-canvas-icon",
    },

    /**
     * @param {HTMLElement} icon
     * @returns {HTMLCanvasElement}
     */
    createIcon: function (icon) {
        var size = point(this.options.iconSize);

        if (!icon || icon.tagName != "CANVAS") {
            icon = document.createElement("canvas");
        }

        icon.width = size.x;
        icon.height = size.y;

        this._setIconStyles(icon, "icon");

        return icon;
    },

    /**
     * @param {HTMLElement} icon
     * @returns {null}
     */
    createShadow: function (icon) {
        return null;
    },

    /**
     * @param {HTMLElement} icon
     * @param {string} type
     * @private
     */
    _setIconStyles: function (icon, type) {
        if (typeof this.options.drawIcon == "function") {
            this.options.drawIcon.apply(this, arguments);
        }

        Icon.prototype._setIconStyles.apply(this, arguments);
    },
});

/**
 * Canvas Icon factory
 * @param {Object} options
 * @returns {L.CanvasIcon}
 */
const canvasIcon = function (options) {
    return new CanvasIcon(options);
};

export default canvasIcon;
export { canvasIcon };
